{% extends "base.html" %}{% load staticfiles %}

{% block css %}
    <style type="text/css">
        .form-inline{
			font-family: "黑体";
			height: 20px;
			text-align: center;
		}
		.trash , .delete{
			background-color: #D33A3C;
		}
		.plus{
			background-color: #00c0ef;
            border-color: #00acd6;
        }
		
		.submit , .edit{
			background-color: #4FAF4C;
		}
		th{
			background-color: #F2F9FE;
		}
		#natureEle .nature{
            text-align: center;
			background-color: #F2F9FE;
		}
		#userTable .ele{
            text-align: center;
            vertical-align: middle;
			background-color: white;
		}
		.table{
			width: 100%;
		}
		.count{
			font:"黑体"
		}
		.btn{
			color: black;
		}
		.btn-default{
			color: white;
		}
        #preview{
            width: 40;
            height: 40px;
        }
		#under .bottom{
			background-color: white;
			border:1px solid lightgrey;
		}

    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid">
       
        <hr/>
	
            
        <table  class="table table-bordered">
            <th colspan="7">
                
                    <button class="btn btn-default plus btn btn-primary" data-toggle="modal" data-target="#plusModal" ><span class = "glyphicon glyphicon-plus">添加配置</span></button>

            </th>
            <tr id = "natureEle">
                <td class="info nature">序号</td>
                <td class="info nature">配置账号</td>
                <td class="info nature">红包金额</td>
                <td class="info nature">返利比率</td>
                <td class="info nature">返利金额</td>
                <td class="info nature">编辑</td>
            </tr>
            
            <tbody id="userTable">

            </tbody>
                   
        </table>
        <div class="row" id="div3" style=" padding: 1% 0;">
            <div class="col-md-12" style="text-align: left;">
                    
                    <div class="text-center">
                        <ul id="visible-pages-example"></ul>
                    </div>
            </div>
        </div>
        


        <div id="plusModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="false" data-show="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">添加配置信息</h4>
					</div>
					<div class="modal-body">
                            <form class="addform" action="http://localhost:8000/settingsAdd/" method="post">
                                <div class="form-group">
                                <label for="recipient-name" class="control-label">配置账号:</label>
                                <input type="text" class="form-control" name="settingid">
                                </div>
                                <div class="form-group">
                                        <label for="recipient-name" class="control-label">红包金额:</label>
                                        <input type="text" class="form-control" name="redmoney">
                                        </div>
                                <div class="form-group">
                                <label for="recipient-name" class="control-label">返利比率:</label>
                                <input type="text" class="form-control" name="rebatepercent">
                                </div>
                                <div class="form-group">
                                    <label for="recipient-name" class="control-label">返利金额:</label>
                                    <input type="text" class="form-control" name="rebatevalue">
                                    </div>
                                <input type="submit" class="btn btn-primary" value="添加">
                            </form>
					</div>
				</div>
			</div>
        </div>
        <img src="" alt="">

    
        
        <div class="myModal">
           
        </div>
        
        
        

{% endblock %}



{% block script %}
<script src="{% static 'layer/layer.js' %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static 'js/jquery.form.min.js' %}"></script>   
    

<script type="text/javascript">
    	

    $('.addform').on('submit', function(e) {
        console.log("jjjjjj");
        e.preventDefault(); 
        $(this).ajaxSubmit({
            success: function (result) {
                console.log(result);
                layer.msg('添加成功');
                window.location.reload();
                parent.$("#plusModal").hide();
            }
        })
    });

    

    function aaa(){
        var url="http://localhost:8000/settingsApi/";
        $.ajax({
                url: url, 
                type: 'POST', 
                success:"success",
                success: function (data) {
                    mydata=data.data;
                    console.log(data);
                    dataParse(data);
                             
                }, 
                error: function (msg) {
                    console.log(msg); //错误信息
                }    
            });

    }
    aaa();
    function dataParse(data){
        for(i=0 ; i<data.data.length ; i++){

            mydata =  data.data[i]
            var settingid = mydata["settingid"];
            var redmoney = mydata["redmoney"];
            var rebatepercent = mydata["rebatepercent"];
            var rebatevalue = mydata["rebatevalue"];
            console.log(settingid,redmoney)
            // var ele = '<tr class="mytr"  > <td class="info ele"></td></tr>'
            // <button class="btn btn-default edit btn-primary" data-toggle="modal" data-target="#editModal' + settingid + '">编辑</button>
            // <button class="btn btn-default edit btn-primary" data-toggle="modal" data-target="#editModal">编辑</button>
            var ele ='<tr class="mytr" settingid = "' + settingid + '" redmoney = "' + redmoney + '" rebatepercent = "' + rebatepercent + '" rebatevalue = "' + rebatevalue + '"><td class="info ele">1</td><td class="info ele">' + settingid + '</td><td class="info ele">' + redmoney + '</td><td class="info ele">' + rebatepercent + '</td><td class="info ele">' + rebatevalue + '</td><td class="info ele"><button class="btn btn-default edit btn-primary" data-toggle="modal" data-target="#editModal">编辑</button></td></tr>'
            
            $(".myModal").empty();
            $("#userTable").append(ele);
        }
        $(".edit").click(function(){
            console.log("**********************")
            var that = $(this).parents("tr");
            var settingid = that.attr('settingid');
            var redmoney = that.attr('redmoney');
            var rebatepercent = that.attr('rebatepercent');
            var rebatevalue = that.attr('rebatevalue');
            var ele = '<div class="modal fade bs-example-modal-sm theEditModal" id="editModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">修改配置信息</h4></div><div class="modal-header" id="updetaModal"><form class="editFormContent" action="http://localhost:8000/settingsUpdate/" method="post"><div class="form-group"><label for="recipient-name" class="control-label">配置编号：</label><input type="text" class="form-control" name="settingid" value="' + settingid + '" readonly="readonly"></div><div class="form-group"><label for="recipient-name" class="control-label">红包金额:</label><input type="text" class="form-control" name="redmoney" value="' + redmoney + '"></div><div class="form-group"><label for="recipient-name" class="control-label">返利比率:</label><input type="text" class="form-control" name="rebatepercent" value="' + rebatepercent + '"></div><div class="form-group"><label for="recipient-name" class="control-label">返利金额:</label><input type="text" class="form-control" name="rebatevalue" value="' + rebatevalue + '"></div><input type="submit" class="btn btn-primary" value="更新"></form></div></form></div></div></div></div>'
            $(".myModal").empty();
            
            $(".myModal").append(ele)

            $(".editFormContent").eq(0).on("submit" , function(e){
                e.preventDefault();
                $(this).ajaxSubmit({
                    success:function(result){
                        console.log('post数据成功')
                        layer.msg('更新成功');
                        window.location.reload();
                        parent.$(".theEditModal").hide();
                        $(".editFormContent").on("submit" , "")
                    }
                })
            })
        })
        $("#userNumber").text("共有数据" + data.data.length + "条");
    }

    
       

    
		
	



      






        
    </script>

{% endblock %}


